import {Button, ColorPicker, Select} from '@arco-design/web-react';
import sty from '@/style.module/editor/components/PaintingTool/components/BackgroundFull.module.scss';
import classnames from 'classnames';

/**
 * 纯色背景
 */
const PureColorSelector: React.FC = () => {
    return <ColorPicker defaultValue={'#165DFF'} showPreset showText />;
};
/**
 * 渐变色背景
 */
const GrandientColorSelector: React.FC = () => {
    const [grandientOptions] = useState([
        {label: '线性渐变', key: 'liner'},
        {label: '径向渐变', key: 'radial'},
    ]);

    const [grandient, setGrandient] = useState('liner');

    const changeGrandient = (grandient: string) => {
        setGrandient(grandient);
    };

    return (
        <>
            <Select value={grandient} onChange={changeGrandient}>
                {grandientOptions.map((option) => (
                    <Select.Option key={option.key} value={option.key}>
                        {option.label}
                    </Select.Option>
                ))}
            </Select>
            <div className={classnames(sty.full, sty.columnFlexContainer)}>
                <div className={sty.flexKeyv}>
                    <span>起始颜色:</span>
                    <ColorPicker
                        defaultValue={'#165DFF'}
                        showPreset
                        showText
                        className={sty.value}
                    />
                </div>
                <div className={sty.flexKeyv}>
                    <span>终点颜色:</span>
                    <ColorPicker
                        defaultValue={'#165DFF'}
                        showPreset
                        showText
                        className={sty.value}
                    />
                </div>
            </div>
        </>
    );
};
/**
 * 图片背景
 */
const ImageSelector: React.FC = () => {
    const [imageFullOptions] = useState([
        {label: '拉升铺满', key: 'cover'},
        {label: '比例缩放', key: 'contain'},
    ]);

    const [imageFull, setImageFull] = useState('cover');

    const changeImageFull = (imageFull: string) => {
        setImageFull(imageFull);
    };

    const onClickInputElem = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';
        input.click();
        input.onchange = function () {
            const image = input.files?.[0] as File;
            const fr = new FileReader();
            fr.readAsDataURL(image);
            fr.onload = function() {
                const imgBaseUrl = fr.result
            }
        };
    };

    return (
        <>
            <Select value={imageFull} onChange={changeImageFull}>
                {imageFullOptions.map((option) => (
                    <Select.Option key={option.key} value={option.key}>
                        {option.label}
                    </Select.Option>
                ))}
            </Select>
            <div className={sty.imagePicker} onClick={onClickInputElem}>
                <svg
                    viewBox='64 64 896 896'
                    data-icon='cloud-upload'
                    width='1em'
                    height='1em'
                    fill='currentColor'
                    aria-hidden='true'
                    focusable='false'
                >
                    <path d='M518.3 459a8 8 0 0 0-12.6 0l-112 141.7a7.98 7.98 0 0 0 6.3 12.9h73.9V856c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V613.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 459z'></path>
                    <path d='M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 0 1-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z'></path>
                </svg>
            </div>
        </>
    );
};

const selectorMap = new Map([
    ['pure', <PureColorSelector />],
    ['grandient', <GrandientColorSelector />],
    ['image', <ImageSelector />],
]);

interface IBackgroundFullProps {
    fullType: string;
}
/**
 * 主应用
 */
const BackgroundFull = (
    props: React.PropsWithChildren<IBackgroundFullProps>,
) => {
    return (
        <section className={sty.container}>
            {props.children}
            {selectorMap.get(props.fullType)}
            <div className={sty.full}>
                <Button type='outline' className={sty.full}>
                    应用背景到全部
                </Button>
            </div>
        </section>
    );
};

export default BackgroundFull;
